<template>
    <div class="All">
        <div class="One" :style="{width:num/4*100+'%'}">
            <span>{{num/4*100+'%'}}</span>
        </div>
    </div>
    <br>
    <input type="button" value="25%" style="margin-left:10px" @click="num=1">
    <input type="button" value="50%" style="margin-left:10px" @click="num=2">
    <input type="button" value="75%" style="margin-left:10px" @click="num=3">
    <input type="button" value="100%" style="margin-left:10px" @click="num=3.9">
</template>

<script setup>
        import { ref } from 'vue';
        let num=ref(1);
</script>

<style scoped>
    .All{
        background-color: black;
        height: 30px;
        width: 500px;
        border-radius: 20px;
        align-content: center;
    }
    .One{
        background-color: red;
        height: 80%;
        width: 25%;
        border-radius: 20px;
        margin-left: 5px;
        transition: all 1s;
        position: relative;
    }
    span
    {
        right: -25px;
        bottom: -25px;
        position: absolute;
    }
</style>